<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
          .text{
          	color:black;
          	font-size: 18px;
          	font-weight: bold;
          	
          }
          #xiangpi{
          	width: 110px;
          	height: 50px;
          	font-size: 18px;
          }
          canvas{
          	background: black;
          	position: relative;
          }
          #end_xiangpi{
          	width: 250px;
          	height: 50px;
          	font-size: 18px;
          }
		</style>
	</head>

	<body>
		<span class="text">颜色：</span>
		<input type="color" name="" id="yanse" value="" />
		<span class="text">画笔粗细：</span>
		<input type="range" min='1' max="50" value="10" id='bichu'  step='1' /><span id='cx'>10</span>
		<input type="button" name="xiangpi" id="xiangpi" value="使用橡皮擦" />
		<input type="button" name="end_xiangpi" id="end_xiangpi"   value="橡皮擦使用完毕！重新作画" />
		<br />
		<canvas id="canvas" width="600" height="600"></canvas>
		
		<script type="text/javascript">
			//抓元素
			var canvas=document.getElementById('canvas');
			var cv=canvas.getContext('2d');
//			设置线条颜色和粗细
             cv.strokeStyle='yellow';
             cv.lineWidth=10;
             
          
			
//			给画板加鼠标按下事件     
              canvas.onmousedown=function(e){
              	//获得事件对象
              	var ev=window.event||e;
              	//获得鼠标开始位置
              	var m_start_left=ev.layerX || ev.offsetX;
              	var m_start_top=ev.layerY || ev.offsetY;
              
              	//开启路径
              	cv.beginPath();
              	cv.moveTo(m_start_left,m_start_top);
              	
//          给画板加鼠标移动事件
                canvas.onmousemove=function(e){
//              	获得鼠标当前位置
//                  获得事件对象
              	var ev=window.event||e;
                   var m_now_left=ev.layerX||ev.offsetX;
                   var m_now_top=ev.layerY||ev.offsetY;
                   //指定当前笔触位置
                   cv.lineTo(m_now_left,m_now_top);
                   cv.stroke();
                }
                
                //给画板加鼠标抬起事件
                canvas.onmouseup=function(){
                	canvas.onmousemove=null;
                }
              
              	
              	//改变笔触的颜色
              	document.getElementById('yanse').onchange=function(){
              		cv.strokeStyle=this.value;
              	}
              	
              	//改变画板的粗细
              	document.getElementById('bichu').onchange=function(){
              		cv.lineWidth=this.value;
              		document.getElementById('cx').innerHTML=this.value;
              	}
              	
              	//橡皮擦，改变笔触颜色为背景色
              	 document.getElementById('xiangpi').onclick=function(){
              	 	cv.strokeStyle='black';
              	 }
              	 
              	document.getElementById('end_xiangpi').onclick=function(){
              		cv.strokeStyle='yellow';
              	}
              }
     
			
		</script>
	</body>

</html>